import React from 'react';
import { Button, Checkbox, Form, Input } from 'antd';
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import './index.less'
import { loginFn } from '@/api/user';

import { connect } from 'umi';
import { Dispatch } from 'dva';

interface IProps {
  dispatch: Dispatch
}

const index = ({dispatch}: IProps) => {
  function onFinish(value: {adminname: string, password: string}){
    console.log(value);
    // loginFn(value).then(res => {
    //   console.log(res);
    // })

    // 调用状态管理中的 loginAction 方法
    // 触发模块中定义的异步方法
    dispatch({
      type: 'admin/loginAction',
      payload: value
    })
  }
  return (
    <div>
      <h1 className='login-title'>嗨购后台管理系统登录</h1>
      <Form
      name="normal_login"
      className="login-form"
      initialValues={{ remember: true }}
      onFinish={onFinish}
    >
      <Form.Item
        name="adminname"
        rules={[{ required: true, message: '管理员账号不能为空!' }]}
      >
        <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入管理员账号" />
      </Form.Item>
      <Form.Item
        name="password"
        rules={[{ required: true, message: '密码不能为空!' }]}
      >
        <Input
          prefix={<LockOutlined className="site-form-item-icon" />}
          type="password"
          placeholder="请输入管理员密码"
        />
      </Form.Item>
      <Form.Item>
        <Form.Item name="remember" valuePropName="checked" noStyle>
          <Checkbox>记住我</Checkbox>
        </Form.Item>

        <a className="login-form-forgot" href="">
          忘记密码
        </a>
      </Form.Item>

      <Form.Item>
        <Button type="primary" htmlType="submit" className="login-form-button">
          去登录
        </Button>
        Or <a href="">去注册!</a>
      </Form.Item>
    </Form>
    </div>
  );
};

export default connect()(index);
